<template>
  <view class="container">
    <!-- <u-navbar title="详情" :autoBack="true" :fixed="true" :bgColor="'#ffffff'" :placeholder="true" :titleStyle="{
			color: '#333',
			fontSize: '16px',
		}"></u-navbar> -->
    <view class="media_box">
      <view class="video" v-if="currentTab === 0">
        <video id="myVideo" :src="detailInfo.video"></video>
      </view>
      <view class="swiper-box" v-else>
        <swiper class="swiper" :indicator-dots="false">
          <swiper-item :key="i" v-for="(item, i) in detailInfo.images">
            <image :src="item"></image>
          </swiper-item>
        </swiper>
      </view>
      <view class="media_change">
        <view
          class="media_change_item"
          :class="{ active: currentTab === 0 }"
          @click="changeMedia(0)">
          视频
        </view>
        <view
          class="media_change_item"
          :class="{ active: currentTab === 1 }"
          @click="changeMedia(1)">
          图片
        </view>
      </view>
    </view>

    <view class="content">
      <!-- 价格标题区 -->
      <view class="price-section">
        <view class="price">
          <text class="symbol">¥</text>
          <text class="number">{{ detailInfo.rent }}</text>
          <text class="unit">/月</text>
        </view>
        <view class="title">{{ detailInfo.name }}</view>
        <view class="review">
          <view>浏览量&nbsp;{{ detailInfo.visit_num }}</view>
          <view style="display: flex; align-items: center" @click="toRate">
            我要评价
            <u-icon name="arrow-right" size="12" color="#999"></u-icon>
          </view>
        </view>
      </view>

      <!-- 房源信息 -->
      <view class="info-section">
        <view class="section-title">房源信息</view>
        <view class="info-grid">
          <view class="info-item">
            <text class="label">面积</text>
            <text class="value">{{ detailInfo.area }}m²</text>
          </view>
          <view class="info-item">
            <text class="label">户型</text>
            <text class="value">{{ detailInfo.house_type_text }}</text>
          </view>
          <view class="info-item">
            <text class="label">楼层</text>
            <text class="value">{{ detailInfo.floor }}楼</text>
          </view>
          <view class="info-item">
            <text class="label">朝向</text>
            <text class="value">{{ detailInfo.face }}</text>
          </view>
          <view class="info-item">
            <text class="label">类型</text>
            <text class="value">{{ detailInfo.rent_type_text }}</text>
          </view>
          <view class="info-item">
            <text class="label">入住</text>
            <text class="value">{{ detailInfo.check_in }}</text>
          </view>
          <view class="info-item">
            <text class="label">装修</text>
            <text class="value">精装修</text>
          </view>
          <view class="info-item">
            <text class="label">付款</text>
            <text class="value">{{ detailInfo.payment_type_text }}</text>
          </view>
        </view>
      </view>

      <!-- 费用详情 -->
      <view class="cost-section">
        <view class="section-title">费用详情</view>
        <view class="cost-list">
          <view class="cost-item">
            <text class="value">¥{{ detailInfo.deposit }}</text>
            <text class="label">押金</text>
          </view>
          <view class="cost-item">
            <text class="value">¥{{ detailInfo.manage_rate }}</text>
            <text class="label">管理费</text>
          </view>
          <view class="cost-item">
            <text class="value">¥{{ detailInfo.water_rate }}/吨 (月)</text>
            <text class="label">水费</text>
          </view>
          <view class="cost-item">
            <text class="value">¥{{ detailInfo.power_rate }}/kwh (月)</text>
            <text class="label">电费</text>
          </view>
        </view>
      </view>

      <!-- 房源设施 -->
      <view class="facility-section">
        <view class="section-title">房源设施</view>
        <view class="facility-grid">
          <view
            class="facility-item"
            v-for="(item, index) in facilities"
            :key="index">
            <image
              :src="item.icon"
              mode=""
              style="width: 64rpx; height: 64rpx"></image>
            <text>{{ item.option_name }}</text>
          </view>
        </view>
      </view>

      <!-- 位置及周边 -->
      <view class="location-section">
        <view class="section-header">
          <text class="section-title">位置及周边</text>
          <text class="more">查看地图 ></text>
        </view>
        <view class="address">
          <image
            :src="location"
            style="width: 32rpx; max-height: 30rpx"></image>
          <text>柯木朗新村坪揽排街31号-精装阳光大单间</text>
        </view>
        <view class="map_box">
          <image class="map-image" :src="map_url" mode="aspectFill"></image>
          <view class="map_select">
            <view
              class="select_item"
              :class="{ active: mapCurrent === index }"
              :key="index"
              v-for="(item, index) in map_select"
              @click="mapSelectChange(index)">
              {{ item.name }}
              <view class="line" v-show="index < 4"></view>
            </view>
          </view>
        </view>
        <view class="poi-list">
          <view class="poi-item">
            <view class="name">地铁站</view>
            <view class="poi-item-content">
              <view class="poi-item-info">
                <text class="station">柯木朗</text>
                <text class="distance">298.78m</text>
              </view>
              <view class="poi-item-info">
                <text class="name">龙洞</text>
                <text class="distance">1660.94m</text>
              </view>
              <view class="poi-item-info">
                <text class="name">高塘石</text>
                <text class="distance">1700.14m</text>
              </view>
            </view>
          </view>
          <view class="poi-item">
            <text class="name">公交站</text>
            <view class="poi-item-content">
              <view class="poi-item-info">
                <text class="station">柯木朗</text>
                <text class="distance">278.45m</text>
              </view>
              <view class="poi-item-info">
                <text class="name">地铁站体育西</text>
                <text class="distance">384.65m</text>
              </view>
              <view class="poi-item-info">
                <text class="name">元岗街</text>
                <text class="distance">530.43m</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 入住须知 -->
      <view class="notice-section">
        <view class="section-title">入住须知</view>
        <view class="notice-content">{{ detailInfo.notice }}</view>
      </view>

      <!-- 房源评价 -->
      <view class="review-section">
        <view class="section-title">房源评价</view>
        <view class="empty-review">
          <template v-if="commentsList.length == 0">
            <image
              src="../static/images/empty-review.png"
              mode="aspectFit"></image>
            <text>还没有评论，快来评论</text>
          </template>
          <button class="review-btn" @click="toRate">去评论</button>
        </view>
      </view>

      <!-- 相似房源 -->
      <view class="similar-section">
        <view class="section-title">附近房源</view>
        <scroll-view class="similar-list" scroll-x>
          <view
            class="similar-item"
            v-for="(item, index) in similarHouses"
            :key="index">
            <image :src="item.images[0]" mode="aspectFill"></image>
            <view class="similar-info">
              <view class="title">{{ item.name }}</view>
              <view class="tags">
                <text v-for="(tag, tagIndex) in item.tags_text" :key="tagIndex">
                  {{ tag }}
                </text>
              </view>
              <view class="price">
                <text class="symbol">¥</text>
                <text class="number">{{ item.rent }}</text>
                <text class="unit">/月</text>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>

      <!-- 底部按钮 -->
      <view class="bottom-bar">
        <view class="icon-btn" @click="handleCollect">
          <image :src="icon18" mode=""></image>
          <text>收藏</text>
        </view>
        <view class="icon-btn">
          <image :src="icon19" mode=""></image>
          <text>整栋待租</text>
        </view>
        <button class="contact-btn phone">电话咨询</button>
        <button class="contact-btn chat">在线沟通</button>
      </view>
    </view>
  </view>
</template>

<script>
import {
  getNearHouses,
  getHouseDetail,
  getComments,
  addCollect,
} from "@/api/houseresources.js";
import { Toast } from "@/utils/utils.js";
export default {
  data() {
    return {
      currentTab: 0,
      imgUrl: this.$Config.HTTP_REQUEST_URL + "/img/index-product.jpg",
      location: this.$Config.HTTP_REQUEST_URL + "/img/location.png",
      map_url: this.$Config.HTTP_REQUEST_URL + "/img/map.jpg",

      icon18: this.$Config.HTTP_REQUEST_URL + "/img/icon18.png",
      icon19: this.$Config.HTTP_REQUEST_URL + "/img/icon19.png",
      facilitiesIcons: [
        this.$Config.HTTP_REQUEST_URL + "/img/module_icon1.png",
        this.$Config.HTTP_REQUEST_URL + "/img/module_icon2.png",
        this.$Config.HTTP_REQUEST_URL + "/img/module_icon3.png",
        this.$Config.HTTP_REQUEST_URL + "/img/module_icon4.png",
        this.$Config.HTTP_REQUEST_URL + "/img/module_icon5.png",
        this.$Config.HTTP_REQUEST_URL + "/img/module_icon6.png",
        this.$Config.HTTP_REQUEST_URL + "/img/module_icon7.png",
        this.$Config.HTTP_REQUEST_URL + "/img/module_icon8.png",
        this.$Config.HTTP_REQUEST_URL + "/img/module_icon9.png",
        this.$Config.HTTP_REQUEST_URL + "/img/module_icon10.png",
        this.$Config.HTTP_REQUEST_URL + "/img/module_icon11.png",
        this.$Config.HTTP_REQUEST_URL + "/img/module_icon12.png",
        this.$Config.HTTP_REQUEST_URL + "/img/module_icon13.png",
      ],
      mapCurrent: 0,
      map_select: [
        {
          name: "交通出行",
        },
        {
          name: "商城购物",
        },
        {
          name: "休闲娱乐",
        },
        {
          name: "教育医疗",
        },
        {
          name: "应急消防",
        },
      ],
      house_id: null,
      detailInfo: {},
      similarHouses: [],
      facilities: [],
      commentsList: [],
    };
  },
  onLoad(e) {
    this.house_id = e.id;
  },
  onShow(e) {
    this.getDetail(this.house_id);
    this.getNearList(this.house_id);
    this.getCommentsList(this.house_id);
  },
  methods: {
    changeMedia(index) {
      this.currentTab = index;
    },
    mapSelectChange(index) {
      this.mapCurrent = index;
    },
    toRate() {
      uni.navigateTo({
        url: "/pages-house/rate/rate?house_id=" + this.detailInfo.id,
      });
    },
    getDetail(id) {
      getHouseDetail({
        id: id,
      }).then((res) => {
        this.detailInfo = res.data.data;
        console.log(this.detailInfo);
        this.handleFacilities(this.detailInfo.facilities_list);
      });
    },
    getNearList(id) {
      getNearHouses({
        house_id: id,
      }).then((res) => {
        this.similarHouses = res.data.data;
      });
    },
    getCommentsList(id) {
      getComments({
        page: 1,
        house_id: id,
      }).then((res) => {
        this.commentsList = res.data.data.data;
      });
    },
    handleFacilities(data) {
      data.forEach((item, index) => {
        item.icon = this.facilitiesIcons[index];
      });
      this.facilities = data;
    },
    handleCollect() {
      addCollect({
        house_id: this.house_id,
      }).then((res) => {
        console.log(res);
        if (res.response.data.code == 1) {
          Toast(res.response.data.msg);
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  min-height: 100vh;
  background: #f5f6fa;
  padding-bottom: calc(130rpx + env(safe-area-inset-bottom));
}

.media_box {
  width: 100%;
  height: 496rpx;
  position: relative;

  .video {
    width: 100%;
    height: 100%;

    #myVideo {
      width: 100%;
      height: 100%;
    }
  }

  .swiper-box {
    position: relative;
    width: 100%;
    height: 100%;

    .swiper {
      width: 100%;
      height: 100%;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .image-count {
      position: absolute;
      right: 24rpx;
      bottom: 24rpx;
      padding: 4rpx 16rpx;
      background: rgba(0, 0, 0, 0.4);
      border-radius: 100rpx;
      color: #fff;
      font-size: 24rpx;
    }
  }

  .media_change {
    left: 50%;
    bottom: 32rpx;
    transform: translateX(-50%);
    width: 192rpx;
    height: 50rpx;
    position: absolute;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 26rpx;

    .media_change_item {
      width: 96rpx;
      height: 50rpx;
      line-height: 50rpx;
      text-align: center;
      color: #fff;
      font-size: 24rpx;
      border-radius: 26rpx;
      position: absolute;
      top: 0;

      &:nth-child(1) {
        left: 0;
      }

      &:nth-child(2) {
        right: 0;
      }

      &.active {
        background: #fe4f04;
      }
    }
  }
}

.content {
  width: 100%;
  height: auto;
  overflow: hidden;
  padding: 0 40rpx;
  box-sizing: border-box;
  background: #ffffff;
  border-radius: 40rpx 40rpx 0rpx 0rpx;
}

.price-section {
  padding: 24rpx 0;
  background: #fff;

  .price {
    margin-bottom: 16rpx;

    .symbol {
      font-size: 28rpx;
      color: #ff5a5f;
    }

    .number {
      font-size: 40rpx;
      color: #ff5a5f;
      font-weight: 500;
    }

    .unit {
      font-size: 24rpx;
      color: #999;
    }
  }

  .title {
    font-size: 32rpx;
    color: #333;
    margin-bottom: 16rpx;
  }

  .review {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 24rpx;
    color: #999;
  }
}

.section-title {
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
  margin-bottom: 24rpx;
}

.info-section {
  margin-top: 24rpx;
  padding: 24rpx 0;
  background: #fff;

  .info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24rpx;

    .info-item {
      display: flex;
      justify-content: flex-start;
      align-items: center;

      .label {
        font-size: 28rpx;
        color: #999;
        margin-right: 10rpx;
      }

      .value {
        font-size: 28rpx;
        color: #333;
      }
    }
  }
}

.cost-section {
  margin-top: 24rpx;
  padding: 24rpx 0;
  background: #fff;

  .cost-list {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .cost-item {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;

      .label {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #999999;
        margin-top: 20rpx;
      }

      .value {
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 28rpx;
        color: #fe4f04;
      }
    }
  }
}

.facility-section {
  margin-top: 24rpx;
  padding: 24rpx 0;
  background: #fff;

  .facility-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24rpx;

    .facility-item {
      display: flex;
      flex-direction: column;
      align-items: center;

      text {
        font-size: 24rpx;
        color: #666;
        margin-top: 12rpx;
      }
    }
  }
}

.location-section {
  margin-top: 24rpx;
  padding: 24rpx 0;
  background: #fff;

  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24rpx;

    .more {
      font-size: 26rpx;
      color: #fe4f04;
    }
  }

  .address {
    display: flex;
    align-items: center;
    margin-bottom: 24rpx;

    text {
      flex: 1;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #999999;
      margin-left: 12rpx;
    }
  }

  .map_box {
    position: relative;
    height: 300rpx;
    width: 100%;
    margin-bottom: 32rpx;

    .map-image {
      width: 100%;
      height: 100%;
      border-radius: 12rpx;
      margin-bottom: 24rpx;
    }

    .map_select {
      left: 50%;
      bottom: 24rpx;
      transform: translateX(-50%);
      width: 600rpx;
      height: 48rpx;
      position: absolute;
      background: #ffffff;
      border-radius: 26rpx;
      padding: 14rpx 32rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;

      .select_item {
        height: 100%;
        font-family: PingFangSC, PingFang SC;
        font-weight: 300;
        font-size: 22rpx;
        color: #333333;
        display: flex;
        justify-content: space-between;
        align-items: center;

        view.line {
          margin: 0 10rpx;
          width: 2rpx;
          height: 100%;
          background-color: #d1d2d4;
        }

        &.active {
          color: #fe4f04;
        }
      }
    }
  }

  .poi-list {
    .poi-item {
      display: flex;
      justify-content: space-between;
      margin-bottom: 16rpx;

      &:last-child {
        margin-bottom: 0;
      }

      .name {
        font-size: 28rpx;
        color: #333;
        width: 180rpx;
      }

      .poi-item-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .poi-item-info {
          display: flex;
          justify-content: space-between;
        }
      }

      .station {
        flex: 1;
        font-size: 28rpx;
        color: #666;
      }

      .distance {
        font-size: 28rpx;
        color: #999;
      }
    }
  }
}

.notice-section {
  margin-top: 24rpx;
  padding: 24rpx 0;
  background: #fff;

  .notice-content {
    font-size: 28rpx;
    color: #666;
  }
}

.review-section {
  margin-top: 24rpx;
  padding: 24rpx 0;
  background: #fff;

  .empty-review {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 48rpx 0;

    image {
      width: 328rpx;
      height: 208rpx;
      margin-bottom: 24rpx;
    }

    text {
      font-size: 28rpx;
      color: #999;
      margin-bottom: 24rpx;
    }

    .review-btn {
      width: 200rpx;
      height: 72rpx;
      line-height: 72rpx;
      background: #fe4f04;
      color: #fff;
      font-size: 28rpx;
      border-radius: 36rpx;
    }
  }
}

.similar-section {
  margin-top: 24rpx;
  padding: 24rpx 0;
  background: #fff;

  .similar-list {
    height: 440rpx;

    .similar-item {
      display: block;
      float: left;
      width: 300rpx;
      height: 440rpx;
      margin-right: 24rpx;

      &:last-child {
        margin-right: 0;
      }

      image {
        width: 100%;
        height: 200rpx;
        border-radius: 12rpx;
      }

      .similar-info {
        box-sizing: border-box;
        width: 100%;
        height: 240rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 16rpx 0;

        .title {
          width: 100%;
          height: 60rpx;
          line-height: 30rpx;
          font-size: 28rpx;
          color: #333;
          white-space: normal;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }

        .tags {
          min-height: 32rpx;

          text {
            display: inline-block;
            padding: 4rpx 12rpx;
            background: #f7f8fa;
            color: #666;
            font-size: 22rpx;
            border-radius: 4rpx;
            margin-right: 8rpx;
          }
        }

        .price {
          .symbol {
            font-size: 24rpx;
            color: #ff5a5f;
          }

          .number {
            font-size: 32rpx;
            color: #ff5a5f;
            font-weight: 500;
          }

          .unit {
            font-size: 22rpx;
            color: #999;
          }
        }
      }
    }
  }
}

.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  background: #fff;
  display: flex;
  align-items: center;
  padding: 24rpx 24rpx calc(env(safe-area-inset-bottom));
  box-sizing: border-box;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);

  .icon-btn {
    display: flex;
    flex-direction: column;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 22rpx;
    color: #666666;
    align-items: center;
    margin: 0 12rpx;

    image {
      width: 32rpx;
      height: 30rpx;
    }
  }

  .contact-btn {
    flex: 1;
    height: 72rpx;
    line-height: 72rpx;
    text-align: center;
    font-size: 28rpx;
    border-radius: 36rpx;
    margin: 0 12rpx;

    &.phone {
      background: #fff;
      color: #fe4f04;
      border: 2rpx solid #fe4f04;
    }

    &.chat {
      background: #fe4f04;
      color: #fff;
    }
  }
}
</style>
